@import "main.less";
// Document data
// -------------------------
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
}
article,aside,dialog,footer,header,section,footer,nav,figure,menu,div{
	display:block;
	zoom:1;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal
}

figure{
	margin:0;
}
ul,ol,menu, nav{
	list-style:none;
	margin:0;
	padding:0;
}

body{
	font:12px/1.5 @baseFontFamily;
	color:@grayDark;
	background:@bodyBackground;
}
a{
	text-decoration:none;
	color:@linkColor;
	outline:0 none;
}

a:hover {
	text-decoration:none;
	color:@orange;
}

.clear:after, .banner:after{
	content:'\0020';
	display:block;
	height:0;
	clear:both;
}
.clear{
	zoom:1;
}

.hidden {
	display:none;
}

// components
//--------------------------------------
footer {
	padding:20px;
	text-align:center;	
	overflow:hidden;
}

.avatar{
	width:48px;
	height:48px;
	padding:2px;
	border:1px solid @grayLighter;
	display:block;
}

.avatar_120 {
	width:120px;
	height:120px;
	overflow:hidden;
	padding:2px;
	border:1px solid lighten(@grayLight,20%);
	img {
		width:120px;
		height:120px;
	}
}

.avatar_68 {
	width:68px;
	height:68px;
	overflow:hidden;
	padding:2px;
	border:1px solid lighten(@grayLight,20%);
	img {
		width:68px;
		height:68px;
	}
}

.feed {
	overflow:hidden;
	padding:10px 0;
	border-bottom:1px dotted @grayLight;
	.avatar {
		float:left;
	}
	.summary {
		float:left;
		width:550px;
		margin-left:10px;
		.title {
			.username,h4 {
				color:@orange;
				display:inline;
			}
			
		}
		p{
			margin:10px 0; 
			a {
				color:darken(@green, 0%);
			}
		}
		.functions{
			float:right;
			clear:both;
			cite{	
				color:@grayLight;
				margin-right:10px;
			}
			a{
				color:darken(@green,10%);
				font-weight:bold;
			}
		}
	}
}

.last {
	border:0;
}

header {
	width:100%;
	margin:0 auto;
}

.subject,.banner,.global_nav,footer, .header, .user_menu {
	width:@bodyWidth;
	overflow:hidden;
	margin:0 auto;
}

// icons
//---------------------------------------
.ayw_icon {
	width:20px;
	height:20px;
	display:inline-block;
}
.ayw_icon_phone {
	background:url("@{iconBg}") no-repeat -3px -163px;
}

// header
// ---------------------------------------

.theme_select {
	height:24px;
	display:block;
	clear:right;
	background:url("@{headerBg}") @orange repeat-x 0 -32px;
	.ages {
		float:left;
		margin:4px 10px;
		li {
			float:left;
			margin-right:5px;
			a {
				text-align:center;
				display:block;
				color:@white;
				width:46px;
				height:18px;
				line-height:14px;
				&:hover{
					background:url("@{headerBg}")  -49px -71px;
					color:darken(@orange,20%);
				}
				&.current{
					background:url("@{headerBg}")  0 -71px;
					color:@orange;
					font-weight:bold;
				}
			}
			
		}
	}
	.selector {
		float:right;
		margin:4px 10px;
		li{
			float:left;
			a{
				display:block;
				background-image:url("@{headerBg}");
				width:16px;
				height:16px;
				&.spring{
					background-position:-99px 0;
				}
				&.summer{
					background-position:-139px 0;
				}
				&.autumn{
					background-position:-27px 0;
				}
				&.winter{
					background-position:2px 0;
				}
			}
		}
	}
}

.global_nav{
	.logo {
		float:left;
		padding:20px 10px 10px 10px;
	}
	article {
		float:right;
		margin-top:10px;
		width:640xp;
		.common_tools {
			float:right;
			clear:right;
			height:34px;
			li {
				float:left;
				margin-left:10px;
				a{
					font-size:@baseFontSize;
					line-height:32px;
					em{
						float:left;
						width:32px;
						height:32px;
						margin-right:5px;
						background-image:url("@{headerBg}");
						&.doodle{
							background-position:-282px -71px;
						}
						&.music {
							background-position:-322px -71px;
						}
					}
				}
			}
		}
		.navi_link {
			margin-top:10px;
			width:638px;
			height:40px;
			background:url("@{headerBg}") 0 -210px;
			clear:both;
			float:right;
			menu {
				margin:0 0 0 40px;
				font-size:@midFontSize;
				font-weight:bold;
				line-height:38px;
				overflow:hidden;
				float:left;
				li {
					float:left;
					a {
						display:block;
						margin-right:10px;
						width:60px;
						height:40px;
						color:@white;
						text-align:center;
						&.current{
							background:url("@{headerBg}") -120px -64px;
						}
						&:hover {
							background:url("@{headerBg}") 0 -89px;
						}
					}
				}
			}
			.search_bar {
				float:right;
				width:250px;
				.keywords {
					margin:10px 0 0 14px;
					width:170px;
					border:0;
					height:18px;
					line-height:16px;
					float:left;
				}
				.search_button {
					margin:8px 0 0 20px;
					display:block;
					width:32px;
					height:32px;
					background:url("@{headerBg}") -190px -70px;
					border:0;
					float:left;
					&:hover{
						background:url("@{headerBg}") -235px -70px;
						margin:4px 0 0 16px;
					}
				}
			}
		}
	}
}



// Form
// ----------------------------------------
.form_content,.form_title {
	width:@bodyWidth;
	overflow:hidden;
	margin:0 auto;
}

.width600{
	width:500px;
	margin: 0 20px 20px 240px;
}

.form_content
{
	fieldset {
		margin-top:10px;
		legend {
			font-size:@baseFontSize;
			font-weight:bold;
			border:0;
			margin-bottom:5px;
			.important{
				color:@orange;
			}
		}
	}
	em {
		display:block;
		width:100%;
		height:14px;
		&.top_line {
			background:url("@{registerBg}") no-repeat 0 -92px;
		}
		&.bottom_line {
			background:url("@{registerBg}") no-repeat 0 -188px;
		}
	}
	h3 {
		margin-left:240px;
		font-size:@midFontSize;
		font-family:@altFontFamily;
	}
	.content {
		overflow:hidden;
		padding-top:20px;
		border-left: 1px solid #feb035;
		border-right: 1px solid #feb035;
	}
	
}
.form-actions {
	border:0;
	margin-top:0;
	padding-top:10px;
	margin-left:250px;
	button {
		width:125px;
		height:44px;
		border:0;
		color:@white;
		font-size:@largeFontSize;
		font-family:@altFontFamily;
		background:url("@{registerBg}") no-repeat 0 -235px;
	}
}
		
.control-group {
	clear:both; 
	zoom:1;
	overflow:hidden;
	.control-label {
		float:left;
		width:240px;
		text-align:right;
		line-height:40px;
		margin-right:10px;
	}
	.controls {
		float:left;
		input, select, textarea {
			float:left;
			height:24px;
			line-height:24px;
			margin-top:3px;
		}
		.tips, .error_tips, .help {
			display:inline-block;
			width: 288px;
			overflow:hidden;
			p{
				margin: 3px 5px 0 12px;
				padding:5px 15px;
				max-height: 60px;
				overflow: hidden;
				line-height: 20px;
			}
			.ft {
				height: 6px;
				font-size: 6px;
				overflow: hidden;
				margin: 0 5px 0 12px;
			}
		}
		.help {
			color:@grayLight;
		}
		.error_tips{
			p {
				background:url("@{formUi}") no-repeat 0 -130px;
			}
			.ft {
				background:url("@{formUi}") no-repeat 0 -210px;
			}
		}
		.tips{
			p {
				background:url("@{formUi}") no-repeat 0 0;
			}
			.ft {
				background:url("@{formUi}") no-repeat 0 -80px;
			}
		}
		.input-xlarge {
			padding:2px;
			font-size:@midFontSize;
			font-weight:bold;
		}
		.multiple_input {
			input {
				margin-right:5px;
			}
			float:left;
			margin-right:10px;
			line-height:28px;
		}	
	}
}

// prompt
.Prompt_top, .Prompt_btm, .Prompt_ok, .Prompt_x{background:url(images/message.gif) no-repeat;display:inline-block}
.Prompt{width:640px;margin:100px auto 180px;text-align:left}
.Prompt_top{background-position:0 0;height:15px;width:100%}
.Prompt_con{border-left:1px solid #E7E7E7;border-right:1px solid #E7E7E7;background:#fff;overflow:hidden}
.Prompt_btm{background-position:0 -27px;height:6px;width:100%;overflow:hidden}
.Prompt_con dl{margin:0 30px;overflow:hidden}
.Prompt_con dt{font-size:18px;padding:15px 0;border-bottom:1px solid #EEEEEE;font-weight: bold;_height:20px}
.Prompt_con dd{float:left;display:block;padding:15px}
.Prompt_con dd h2{font-size:14px;line-height:30px}
.Prompt_ok{background-position:-72px -39px;width:68px;height:68px}
.Prompt_x{background-position:0 -39px;width:68px;height:68px}
.Prompt_con a.a{color:#fff;padding:0}

// overide ui
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 0px solid #cccccc; background: url(); font-weight: normal; color:@orange; }
